<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq布局结构事件</title>
	</head>
	<body>
		<div id="a">
			
		
		<div class="box">
			<h1>boxboxboxboxbo</h1>
		</div>
		</div>
		<button class="btn">按钮</button>
		<button class="btn">按钮</button>
		<button class="btn">按钮</button>
		<button class="btn">按钮</button>
		<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//给.box 外面套一个.father
			$(".box").wrap("<div class='father'></div>")
			//将.box内的结构用.inner包裹着
			$(".box").wrapInner("<div class='inner'></div>")
			
			
			
			//给所有的.father外面一个总的.gfather
			//$(".box").wrapAll("<div class='gfather'></div>")
			
			
			//插入 队尾
			//父节点.append(子元素的模板)
			$(".box").append("<h4>插入</h4>")
			
			//子元素.appentTo(父节点)
			$("<h5>插入</h5>").appendTo(".box")
			
			
			//prepend  插入对头
			//prependTo
			$(".box").prepend("<h1>插入</h1>")			
			$("<h2>插入</h2>").prependTo(".box")
			
			
			//等同于 innerText 和innerHTML
			$(".box").text()
			$(".box").html()
			
			
			//children(选择器)  直属儿子
			//find(选择器)    后代
		   
		   
		   //控制同级其他兄弟
		   //siblings  同级其他兄弟
		   //上一个prev 下一个next
		   $(".father:first").siblings().css({"collr":"yellow"})
		    $(".father:nth-of-type(2)").prev().css({"collr":"yellow"})
		     $(".father:nth-of-type(2)").next().css({"collr":"yellow"})
		     
		     //parent  只找上一层父节点  parents()找.box所有的父节点
		    console.log($(".box").parent()) 
		    console.log($(".box").parents())
		    
		    //绑定事件
		    $(".btn").click(function(){
		    	
		    })
		    
		    //eq(n)表示一个集合里面的第n个元素
		    $(".btn").eq(1).click(function(){
		    	$(this).css({"background":"red"})
		    })
		    
		    
		    $(".btn").on("click",function(){
		    	
		    	//this 也是指向元素节点本身  要用jq方法就要用$(this)包装一下
		    	$(this).css({"width":"200px"})
		    	
		    	//获取DOM的集合中的某一个索引值
		    	console.log($(this).index())
		    })
		    
		    
		    
		    //事件代理
		    $(".gfather").on("click","h3",function(){
		    	 //this --> h3
		    	 
		    }).on("click","h4",function(){
		    	//this  -->h4
		    })
		       
		    //
		    var obj={
		    	name:"obj",
		    	fn:function(){
		    		console.log(this.name)
		    	}
		    }
		    var obj2={name:"obj2"};
		    //函数.bind(对象)   永久绑定this指向
		    var fn2 =obj.fn.bind(obj2)
		    
		    
		    
		    
		    $(".gfather").on("click","h1",function(){
		    	
		    }.bind($(".gfather")))
		</script>
	</body>
</html>
